import React, { useState } from 'react';
import { Layout, Menu, Breadcrumb, Card, Table, Button, Modal, Form, Input, message, Popconfirm } from 'antd';
import { UserOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
// 添加 Content 组件导入
import { Content } from 'antd/es/layout/layout';

const CustomerManagement = () => {
  const [customers, setCustomers] = useState([
    { id: 1, name: '张三', phone: '13800138001', address: '北京市朝阳区', points: 1200 },
    { id: 2, name: '李四', phone: '13800138002', address: '上海市浦东新区', points: 800 },
    { id: 3, name: '王五', phone: '13800138003', address: '广州市天河区', points: 450 },
    { id: 4, name: '赵六', phone: '13800138004', address: '深圳市南山区', points: 2100 },
  ]);
  
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editingCustomer, setEditingCustomer] = useState<any>(null);
  const [form] = Form.useForm();

  // 表格列定义
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '积分',
      dataIndex: 'points',
      key: 'points',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <>
          <Button 
            type="link" 
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定删除此客户吗？"
            onConfirm={() => handleDelete(record.id)}
            okText="确定"
            cancelText="取消"
          >
            <Button type="link" danger icon={<DeleteOutlined />} />
          </Popconfirm>
        </>
      ),
    },
  ];

  const showModal = () => {
    setEditingCustomer(null);
    form.resetFields();
    setIsModalVisible(true);
  };

  const handleEdit = (record: any) => {
    setEditingCustomer(record);
    form.setFieldsValue(record);
    setIsModalVisible(true);
  };

  const handleDelete = (id: number) => {
    setCustomers(customers.filter(customer => customer.id !== id));
    message.success('客户删除成功！');
  };

  const handleOk = () => {
    form.validateFields().then(values => {
      if (editingCustomer) {
        // 编辑客户
        setCustomers(customers.map(customer => 
          customer.id === editingCustomer.id 
            ? { ...values, id: editingCustomer.id } 
            : customer
        ));
        message.success('客户信息更新成功！');
      } else {
        // 新增客户
        const newCustomer = {
          id: customers.length > 0 ? Math.max(...customers.map(c => c.id)) + 1 : 1,
          ...values,
          points: 0
        };
        setCustomers([...customers, newCustomer]);
        message.success('客户添加成功！');
      }
      form.resetFields();
      setIsModalVisible(false);
    });
  };

  const handleCancel = () => {
    form.resetFields();
    setIsModalVisible(false);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Layout className="site-layout">
        // 使用已导入的 Content 组件
        <Content style={{ margin: '16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>客户管理</Breadcrumb.Item>
          </Breadcrumb>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360, background: '#fff' }}>
            <Card 
              title="客户列表" 
              bordered={false}
              extra={
                <Button 
                  type="primary" 
                  icon={<PlusOutlined />} 
                  onClick={showModal}
                >
                  添加客户
                </Button>
              }
            >
              <Table dataSource={customers} columns={columns} pagination={{ pageSize: 5 }} />
            </Card>
          </div>
        </Content>
      </Layout>

      {/* 添加/编辑客户模态框 */}
      <Modal
        title={editingCustomer ? "编辑客户" : "添加客户"}
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="name"
            label="姓名"
            rules={[{ required: true, message: '请输入客户姓名!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="phone"
            label="联系电话"
            rules={[{ required: true, message: '请输入联系电话!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="address"
            label="地址"
            rules={[{ required: true, message: '请输入地址!' }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </Layout>
  );
};

export default CustomerManagement;